<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>设备维修报价</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="repair-quote">
      <search-btn-view btn-text="维修报价查询" @before-open="resetSearch" @search="searchData">
        <div slot="search-content">
          <search-form :search="search"></search-form>
        </div>
      </search-btn-view>
      <div class="repair-quote-table-div">
        <el-table fit stripe border :data="quoteList" style="width:100%;" height="parent">
          <el-table-column sortable prop="providerName" label="供应商" min-width="120px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="materialName" label="物料名称" min-width="140px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="color" label="编号" min-width="120px" header-align="center"></el-table-column>
          <el-table-column sortable prop="colorDescription" label="描述" min-width="130px" header-align="center">
          </el-table-column>
          <el-table-column sortable prop="model" label="规格" min-width="130px" header-align="center"></el-table-column>
          <el-table-column sortable prop="price" label="单价" min-width="120px" align="center"></el-table-column>
          <el-table-column :resizable="false" label="操作" width="100px" align="center" fixed="right">
            <template slot-scope="scope">
              <el-popover v-model="scope.row.isShow" trigger="click" placement="bottom-end" @show="resetPrice(scope.row)">
                <div style="width:250px">
                  <el-input-number style="width:100%" is-decimal-zero size="small" v-model="scope.row.updatePrice" :min="0" :precision="2"
                    controls-position="right" placeholder="请输入单价"></el-input-number>
                  <div style="margin-top:10px;text-align:center">
                    <el-button size="small" type="primary" @click="toUpdatePrice(scope.row)">设置</el-button>
                  </div>
                </div>
                <el-button slot="reference" type="primary" size="mini" @click.stop>设置单价</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange">
      </table-pagination>
    </div>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/searchBtnView.css"
  ], [
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/mixins/tablePaginationMixin.js"
  ]);

</script>
<script src="./searchForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    mixins: [
      tablePaginationMixin(20)
    ],

    data: function () {
      var search = {
        materialName: '',
        model: '',
        providerName: '',
        color: '',
        colorDescription: ''
      };
      return {
        loading: false,
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        quoteList: []
      };
    },

    created: function () {
      this.setQuoteList(true);
    },

    methods: {
      setQuoteList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var pageSize = pagination.pageSize;
        var start = (pagination.currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
          view: 1
        };

        var search = this.search;
        var fields = ['materialName', 'model', 'providerName', 'color', 'colorDescription'];
        SysUtil.setPostData(postData, search, fields);

        this.loading = true;
        var self = this;
        ajaxRequest('workOrder/getMaterialPriceList', postData, false).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          var quoteList = res.returnData;
          for (var i = 0; i < quoteList.length; i++) {
            var quote = quoteList[i];
            var price = quote.price;
            if (SysUtil.isEmpty(price) || price === 0) {
              price = undefined;
            }
            quote.price = price;
            quote.updatePrice = price;
            quote.isShow = false;
          }

          self.quoteList = quoteList;
          pagination.totalCount = res.iTotalRecords;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setQuoteList(true);
      },

      pageChange: function () {
        this.setQuoteList();
      },

      resetPrice: function (quote) {
        quote.updatePrice = quote.price;
      },

      toUpdatePrice: function (quote) {
        var price = quote.updatePrice;
        if (price === undefined) {
          this.$alert('请输入单价', '信息');
          return;
        }

        if (price === quote.price) {
          quote.isShow = false;
          return;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('workOrder/updateMaterialPrice', {
          materialCode: quote.materialCode,
          type: 1,
          price: price
        }).then(function (msg) {
          quote.isShow = false;
          quote.price = price;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm
    }
  });

</script>
<style>
  .repair-quote {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    overflow: auto;
    display: flex;
    flex-direction: column;
  }

  .repair-quote .search-form .el-form-item {
    margin-bottom: 10px;
  }

  .repair-quote .search-form .search-input {
    width: 180px;
  }

  .repair-quote .repair-quote-table-div {
    flex: 1;
    overflow: auto;
  }

</style>

</html>
